<script>
import {addResizeListener,removeResizeListener} from 'element-ui/lib/utils/resize-event.js';
import dom from '@/utils/dom.js';
export default {
    name:'RsWrap',
    props:{
        top:{
            type:Number,
            default:0
        },
        left:{
            type:Number,
            default:0
        },
        right:{
            type:Number,
            default:0
        },
        bottom:{
            type:Number,
            default:0
        },
        scrollX:{
            type:Boolean,
            default:false
        },
        scrollY:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        addResizeListener(this.$el,()=>{
            const rect = dom.getBoundingClientRect(this.$el);
            this.$emit('resize',{width:rect.width,height:rect.height});
        })
    },
    destroyed(){
        removeResizeListener(this.$el);
    },
    render(){

        const {top,left,right,bottom,scrollX,scrollY} = this;
        const style = {
            top:`${top}px`,
            left:`${left}px`,
            right:`${right}px`,
            bottom:`${bottom}px`,
            overflowY:scrollY?'auto':'hidden',
            overflowX:scrollX?'auto':'hidden'
        };
        return (
            <div class="rs-wrap" style={style}>
                {this.$slots.default}
            </div>
        )
    }
}
</script>